<template>
  <div class="login-main">
    <img src="./../assets/images/logo.png" class="login-logo">
    <form>
      <div class="row">
        <span>
          <input class="gate" id="account" type="text" v-model="account" placeholder="ACCOUNT"/>
            <label for="account">&nbsp;账&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;</label>
        </span>
      </div>
      <div class="row">
        <span>
          <input class="swing" id="password" type="password" placeholder="PASS" v-model="password"/>
            <label for="password">&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;</label>
        </span>
      </div>
      <section class="login-main-bottom">
        <van-button round type="warning" size="large" class="login-main-login" @click="login">登陆</van-button>
        <section class="to-oper">
          <a href="#" class="regist-link">注册</a>
          <a href="#" class="lost-pass">忘记密码</a>
        </section>
      </section>
    </form>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
  export default {
    name: 'login',
    data() {
      return {
        account:'',  //账号
        password:'', //密码
      }
    },
    methods:{
      ...mapActions({
        showSuccessToast: 'base/showSuccessToast',
        showErrorNotify: 'base/showErrorNotify',
        userLogin: 'login/userLogin'
      }),
      login:function () {
        var vm = this;
        if(this.account == ''){
          this.showErrorNotify("账号不能是空哟");
          return;
        }
        if(this.password == ''){
          this.showErrorNotify("密码不能是空哟");
          return;
        }
        this.userLogin({
          account : this.account,
          password: this.password
        }).then(function (data) {
          if(data.isSuccess){
            vm.showSuccessToast({
              message:"登陆成功"
            })
          }
        })

      }
    }
  }

</script>
<style lang="scss">
  @import '../assets/scss/my/login';
</style>
